<template>
  <view class="card padding-30 margin-top-14">
    <l-title title="里程信息" />
    <view class="margin-top-30">
      <order-info-item label="开始行程公里数" :value="(orderInfo.vehicleStartMileage || 0) + 'km'" />
      <order-info-item label="结束行程公里数" :value="(orderInfo.vehicleEndMileage || 0) + 'km'" />
      <order-info-item label="行程总公里数" :value="(orderInfo.vehicleTotalMileage || 0) + 'km'" />
      <order-info-item label="开始地点" :value="showPlace(orderInfo.vehicleStartSite)" />
      <order-info-item label="结束地点" :value="showPlace(orderInfo.vehicleEndSite)" />
    </view>
  </view>
</template>

<script>
import OrderInfoItem from '../order-info-item/order-info-item'
export default {
  name: 'MileageInfo',
  components: {
    OrderInfoItem
  },
  props: {
    orderInfo: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    showPlace() {
      return (data) => {
		
        if (data && !['',null,"undefined"].includes(data)) {
          const arr = data.split('|')
          return arr[0]
        }
        return '暂无信息'
      }
    }
  }
}
</script>

<style scoped lang="scss">
@include setMargin(top,14);
</style>
